<template>
  <div
    class="tool-container"
    :style="{
      '--left': props.toolInfo.left,
      '--top': props.toolInfo.top,
      '--toolNumber': props.toolList.length,
      '--childTop': childTop,
      '--childLeft': childLeft,
    }"
    :class="{ active: toolShow }"
  >
    <div
      class="tool-item-common-btn"
      @click="handelIconClick"
      :class="{ active: toolShow }"
    >
      <svg-icon :iconClass="props.toolInfo.svgName" color="#fff" size="15" />
    </div>
    <!-- 工具栏 -->
    <div class="tool-item-box" :class="{ active: toolShow }">
      <div
        class="tool-item-common-btn item-btn"
        v-for="(item, index) in props.toolList"
        :key="index"
        :title="item.title"
        :class="{ active: item.active }"
        @click.stop="(event) => handelToolClick(event, item)"
      >
        <svg-icon :iconClass="item.svgName" color="#fff" size="15" />
      </div>
    </div>
    <!-- 子工具栏 -->
    <div class="tool-item-children" v-show="toolChildShow">
      <div
        class="tool-item-common-btn item-child-btn"
        v-for="(item, index) in curToolItem.children"
        :key="index"
        :title="item.title"
        :class="{ active: item.active }"
        @click="handelToolChildClick(item)"
      >
        <svg-icon :iconClass="item.svgName" color="#fff" size="15" />
      </div>
    </div>
  </div>
</template>

<script setup>
const emits = defineEmits(["toolItemChange", "toolItemChildChange"]);
const props = defineProps({
  //菜单信息
  toolInfo: {
    type: Object,
    default: () => {
      return {
        title: "工具名称",
        svgName: "toolbox",
      };
    },
  },
  // 子菜单栏
  toolList: {
    type: Array,
    default: () => {
      return [
        {
          svgName: "toolbox",
          title: "测量1",
          active: false,
        },
      ];
    },
  },
});

const toolShow = ref(true);
const toolChildShow = ref(false);
const curToolItem = ref({});
const curToolChildItem = ref({});
const childTop = ref(0);
const childLeft = ref(0);
// 工具图标点击
function handelIconClick() {
  toolShow.value = !toolShow.value;
  emits("handelIconClick", toolShow.value);
  if (!toolShow.value) {
    //取消菜单选中
    props.toolList.forEach((item) => {
      if (item.active) {
        item.active = false;
        emits("toolItemChange", {
          status: "取消选中",
          data: toRaw(item),
        });
      }
    });
    //取消子菜单展开与选中
    toolChildShow.value = false;
    if (curToolChildItem.value.active) {
      curToolChildItem.value.active = false; // 取消其他子项的active
      emits("toolItemChildChange", {
        status: "取消选中",
        data: toRaw(curToolChildItem.value),
      });
    }
  }
}

// 工具项目选中
function handelToolClick(event, item) {
  // if (curToolItem.value.title === item.title) return;
  props.toolList.forEach((i) => {
    if (i.active && item.title != i.title) {
      i.active = false;
      emits("toolItemChange", {
        status: "取消选中",
        data: toRaw(i),
      });
    }
  });
  item.active = true;
  emits("toolItemChange", {
    status: "选中",
    data: toRaw(item),
  });

  curToolItem.value = item;

  if (curToolChildItem.value.active) {
    curToolChildItem.value.active = false; // 取消其他子项的active
    emits("toolItemChildChange", {
      status: "取消选中",
      data: toRaw(curToolChildItem.value),
    });
  }

  // 存在子菜单，则打开
  if (item.children) {
    toolChildShow.value = true;
    // 计算位置
    const rect = event.target.getBoundingClientRect();
    const scrollTop = window.screenY || document.documentElement.scrollTop;
    const scrollleft = window.screenX || document.documentElement.scrollLeft;
    const childDomWidth = (curToolItem.value.children.length - 1) * 40 + 5;
    childTop.value =
      +props.toolInfo.top.replace("px", "") + scrollTop + 45 + 50 + "px";
    childLeft.value = rect.left + scrollleft - 2.5 - childDomWidth / 2 + "px";
  } else {
    toolChildShow.value = false;
  }
}

// 子工具栏选中
function handelToolChildClick(item) {
  // if (curToolChildItem.value.title === item.title) return;
  const children = curToolItem.value.children;
  children.forEach((i) => {
    if (i.active) {
      i.active = false;
      emits("toolItemChildChange", {
        status: "取消选中",
        data: toRaw(i),
      });
    }
  });
  item.active = true;
  curToolChildItem.value = item;
  emits("toolItemChildChange", {
    status: "选中",
    data: toRaw(item),
  });
}
</script>

<style scoped lang="scss">
.tool-container {
  position: absolute;
  left: var(--left);
  top: var(--top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  // background-color: #293d49;
  background-color: #f5f3ef;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16), inset 0px 1px 35px 0px #ffffff;
  border-radius: 10px;
  transition: all 0.3s ease;

  .tool-item-common-btn {
    width: 30px;
    height: 30px;
    // background-color: #01a3ff;
    background-color: rgba(18,18,18,0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &.active,
    &:hover {
      background-color: #296de5;
    }
  }
}

.tool-item-box {
  display: flex;
  transition: all 0.3s ease;
  width: 0px;
  overflow: hidden;
  &.active {
    width: calc(var(--toolNumber) * 40px);
  }
  .item-btn {
    margin-left: 10px;
  }
}

.tool-item-children {
  position: fixed;
  top: var(--childTop);
  left: var(--childLeft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background-color: #f5f3ef;
  border-radius: 10px;
  transition: all 0.3s ease;
  // background-color: transparent;
  .item-child-btn {
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0px;
    }
  }
}
</style>
